<template>
  <div class="my">
    <div class="my-header">
      <div class="img-info">
        <img :src="head_img_url" alt=""><span>采购商</span>
      </div>
       <div class="username-info">
         <span>{{user_name}}</span><i class="iconfont icon-xiugaiziliao"></i>
         <p>申请入驻&nbsp;&nbsp;></p>
       </div>
    </div>
    <div class="my-content">
      <div class="info-order">
        <div class="order-top">
          <div class="left">
            <i class="iconfont icon-dingdan icon-color" ></i><span>我的订单</span>
          </div>
            <router-link to="/order/all" tag='div' class='right'>全部订单<span>></span></router-link>

        </div>
        <div class="order-bottom">
          <ul>
            <router-link :to='item.router' tag="li" v-for='(item,key) in order' :key="key">
              <i class='iconfont' :class="item.icon"></i>
              <p v-text="item.title"></p>
              <span v-text='item.number'></span>
            </router-link>
          </ul>
        </div>
      </div>
      <div class="info-bar">
        <ul>
          <router-link v-for="(item,key) in bar" :key='key' :to="item.router" tag="li" v-if="item.tel == ''">
            <div class="left">
              <i class="iconfont icon-color" :class="item.icon"></i><span v-text="item.title"></span>
            </div>
            <div class="right">
            <span>></span>
            </div>
          </router-link>
          <li v-for="(item,key) in bar" :key='key' v-if="item.tel != ''">
            <div class="left">
              <a :href="item.tel"><i class="iconfont icon-color" :class="item.icon"></i><span v-text="item.title"></span></a>
            </div>
            <div class="right">
            <a :href="item.tel"><span>></span></a>
            </div>
          </li>
        </ul>
        <div>

        </div>
      </div>
    </div>
  </div>
</template>
<script typy="text/ecmascript-6">
 export default{
     data () {
         return{
             bar:[
               {icon:'icon-zhanghu',title:'我的账户',router:'/account',tel:''},
               {icon:'icon-dizhi-01',title:'地址管理',router:'/address',tel:''},
               {icon:'icon-shoucangjia',title:'收藏夹',router:'/favorite',tel:''},
               {icon:'icon-icon',title:'品牌定制',router:'/need_message',tel:''},
               {icon:'icon-survey',title:'意见反馈',router:'/feedback',tel:''},
               {icon:'icon-weibiaoti-',title:'客服热线',router:'',tel:'tel://15914860780'}
             ],
           order:[
             {icon:'icon-daifukuan',title:'待付款',router:'/order/waitPay',number:45},
             {icon:'icon-yifukuan',title:'已付款',router:'/order/waitSend',number:43},
             {icon:'icon-gerenzhongxindingdandaishouhuo',title:'待收货',router:'/order/waitConfirm',number:44},
             {icon:'icon-yiwanchengdingdan',title:'已完成',router:'/order/completed',number:41},
           ],
             user_name:'',
             head_img_url:''
         }
     },
     created(){
         const user_name1 = JSON.parse(localStorage.getItem('loginMessage'))
         this.user_name = user_name1.user_name;
         this.head_img_url =user_name1.head_img_url;
     }
 }
</script>
<style  lang="less" rel="stylesheet/less">
  @import "../../lib/less/variable";
  .my{
    width: 100%;
    .icon-color{
      color: #0F7ADA;
      vertical-align: middle;
      .fs(20);
      .ml(5);
      .mr(10);
    }
    .left{
      display: inline-block;
      width: 50%;
      float: left;
      .fs(14)
    }
    .right{
      display: inline-block;
      width: 50%;
      float: left;
      .fs(14);
      text-align: right;
      span{
        color: #A2A2A2;
        .pr(10);
        .fs(16);
        .pl(10)
      }
    }
    .my-header{
      background: #0F7ADA;
      .h(120);
      .img-info{
        width: 30%;
        display: inline-block;
        img{
          border-radius: 50%;
          border:4px solid #B8D4EF;
          .w(64);
          .h(64);
          .mt(20);
          .ml(20)
        }
        span{
          .w(60);
          .h(25);
          .lh(23);
          position: relative;
          .left(25);
          .top(-10);
          .fs(14);
          color: #Fff;
          display: inline-block;
          text-align: center;
          background: #F38F00;
          border-radius: 3px;
        }
      }
      .username-info{
        width: 40%;
        display: inline-block;
        .fs(16);
        color: #fff;
        position: relative;
        top: -31%;
        span{
          .mr(10)
        }
        i{
        .fs(20);
          vertical-align: middle
        }
        p{
          .fs(14);
          .h(25);
          .lh(23);
          .padding(0,5);
          background: #57B6E8;
          border-radius: 3px;
          display: inline-block;
          box-sizing: border-box;
        }

      }

    }
    .my-content{
      width: 100%;
      .info-order{
        background-color: #fff;
         .mb(10);
        .order-top{
          width: 100%;
          .h(40);
          .lh(38);
          .fs(14);
          border-bottom:1px solid #ccc;
          .left{
            width: 49%;
            display: inline-block;
          }
          .right{
            width: 49%;
            display: inline-block;
            text-align: right;
            .pr(10);
          }
        }
        .order-bottom{
          width: 100%;
          .h(80);
          ul{
            display: flex;
            text-align: center;
            li{
              flex: 1;
              i{
                .fs(26);
                position: relative;
                .top(10)
              }
              p{
                .fs(14);
                .mt(8);
              }
              span{
                display: inline-block;
                .fs(12);
                .h(18);
                .w(18);
                color: #fff;
                border-radius: 50%;
                background:#0F7ADA;
                position: relative;
                .top(-50) ;
                .left(15);
                z-index: 2;
              }
            }
          }
        }
      }
      .info-bar{
        width: 100%;
        ul{
          li{
            .h(50);
            background: #fff;
            .lh(48);
            border-bottom:1px solid #ccc;
            a{
              color: #666;
              width: 100%;
              display: inline-block;
            }
          }
        }
      }
    }
  }
</style>
